<template>
	<view>	
		<view class="cart-1" v-if="cart.length!==0">	
				<dizhi></dizhi>
			<view class="cart-title">
				<uni-icons type="shop" size="40"></uni-icons>
				<text class='cart-text'>购物车</text>
			</view>
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="(goods,index) in cart" :key='index'>
						<uni-swipe-action-item :right-options="options" @click="swipeHandler(goods)">
							<goods-item :goods="goods" :showRadio="showRadio" @radioChange='radioChange'
								:shownum="shownum" @numAdd='numAdd'></goods-item>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<jiesuan></jiesuan>
		</view>
		<view class="empty-cart" v-else>
			<image class='empty-image' src="../../static/cart_empty@2x.png" mode=""></image>
			<text class="ziti">空空如也.......</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState('cart_m', ['cart']),
			...mapGetters('cart_m', ['total']),
		},
		data() {
			return {
				showRadio: true,
				shownum: true,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#C00000'
					}
				}]
			};
		},
		onLoad() {
			console.log(this.$store);
		},
		onShow() {
			this.setBadge();
		},
		methods: {
			// 删除动作
			numAdd(goods_id_count) {
				console.log(goods_id_count);
				this.updateGoodsCount(goods_id_count)
				console.log(this.total);
				this.setBadge();
			},
			...mapMutations('cart_m', ['updateGoodsState', 'updateGoodsCount', 'removeShop']),
			radioChange(goods_id_state) {
				this.updateGoodsState(goods_id_state);
			},
			setBadge() {
				console.log(112323)
				uni.setTabBarBadge({
					index: 2,
					text: this.total + ''
				})
			},
			// 删除动作
			swipeHandler(goods) {
				console.log(5552);
				console.log(goods);
				this.removeShop(goods.goods_id);
				this.setBadge();
			},
		}

	}
</script>

<style lang="scss">
	.cart-1 {

		padding-bottom: 50px;

		.cart-title {
			height: 50px;
			padding-left: 15px;
			border-bottom: 1px solid gray;

			.cart-text {
				font-size: 30px;

			}
		}
	}
	.empty-cart{
		display: flex;
		flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
		.empty-image{
			width: 200px;
			height: 200px;
		}
		.ziti{
			font-size: 20px;
			line-height: 100px;
		}
	}
</style>
